<!DOCTYPE html>
<html>
<head>
    <title>布料污染检测</title>
    <script>
        // 定义全局变量来追踪OpenCV.js的加载状态
        var Module = {
            onRuntimeInitialized: function() {
                console.log('OpenCV.js初始化完成');
                // 确保cv对象已经完全加载
                if (typeof cv !== 'undefined' && cv.Mat) {
                    document.getElementById('status').textContent = 'OpenCV.js 已就绪';
                    document.getElementById('status').style.color = 'green';
                    document.getElementById('fileInput').disabled = false;
                    if (typeof initializeApp === 'function') {
                        setTimeout(initializeApp, 100); // 添加小延迟
                    }
                } else {
                    console.error('OpenCV.js 加载不完整');
                    document.getElementById('status').textContent = 'OpenCV.js 加载失败';
                    document.getElementById('status').style.color = 'red';
                }
            },
            print: function(text) {
                console.log('OpenCV.js:', text);
            },
            printErr: function(text) {
                console.error('OpenCV.js Error:', text);
            }
        };
    </script>
    <script async src="https://docs.opencv.org/4.8.0/opencv.js" 
            onerror="console.error('OpenCV.js 加载失败');">
    </script>
    <script src="detector.js"></script>
    <style>
        .container {
            max-width: 1200px;  /* 增加容器最大宽度 */
            margin: 0 auto;
            padding: 20px;
        }
        .canvas-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;  /* 添加间距 */
            margin: 20px 0;
            flex-wrap: wrap;  /* 在小屏幕上自动换行 */
        }
        .canvas-wrapper {
            flex: 1;
            min-width: 300px;  /* 最小宽度 */
            max-width: 500px;  /* 最大宽度 */
        }
        .canvas-wrapper h3 {
            margin: 0 0 10px 0;
            text-align: center;
        }
        canvas {
            width: 100%;
            height: auto;
            max-height: 400px;  /* 限制最大高度 */
            object-fit: contain;  /* 保持比例 */
            border: 1px solid #ccc;
            background-color: #f5f5f5;  /* 添加背景色 */
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
        }
        #status {
            color: green;
            margin: 10px 0;
            font-weight: bold;
            padding: 8px;
            background-color: #e8f5e9;
            border-radius: 4px;
        }
        input[type="file"] {
            margin: 15px 0;
            padding: 8px;
            width: 100%;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>布料污染检测</h1>
        <div id="status">OpenCV.js 已就绪</div>
        <input type="file" id="fileInput" accept="image/*">
        <div class="canvas-container">
            <div class="canvas-wrapper">
                <h3>原始图片</h3>
                <canvas id="canvasInput"></canvas>
            </div>
            <div class="canvas-wrapper">
                <h3>检测结果</h3>
                <canvas id="canvasOutput"></canvas>
            </div>
        </div>
        <div id="result"></div>
    </div>
</body>
</html> 